<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">房产详情</small>
      </a>
    </header>
    <main>
      <section class="detail_status_info">
        <header><span>基本信息</span></header>
        <p><label>详细坐落地址：</label><span>{{this.listData.fld_43}}{{this.listData.fld_county}}{{this.listData.fld_street}}{{this.listData.fld_streetadd}}</span></p>
        <p><label>所属部门(分公司)：</label><span>{{this.listData.fld_dep}}</span></p>
        <p><label>房产类型：</label><span>{{this.listData.fld_10}}</span></p>
        <p><label>权证编码：</label><span>{{this.listData.fld_16}}</span> </p>
        <p><label>房产证权属单位：</label><span>{{this.listData.fld_17}}</span> </p>
        <p><label>建筑面积(m²)：</label><span>{{this.listData.fld_14}}</span> </p>
      </section>
      <el-collapse accordion class="detail_status_info">
        <el-collapse-item>
          <template slot="title" name="1">
              <div class="collapseheader"><i class="header-icon el-icon-document"></i>门市买场档案 <span>（门市总面积：{{this.retailArchivesSum}}）</span></div>
           </template>
            <div>
              <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>门市店面名称</th>
                  <th>门市卖场总面积</th>
                  </tr>
                  <tr  v-for="item in retailArchives">
                  <td>{{item.name}}</td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
                </div>
          </el-collapse-item>

           <el-collapse-item>
          <template slot="title" name="1">
            <div class="collapseheader">
              <i class="header-icon el-icon-document"></i>仓库档案 <span>（仓库总面积：{{this.wareHouseArchivesSum}}）</span></div>
          </template>
            <div>
              <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>仓库名称</th>
                  <th>仓库总面积</th>
                  </tr>
                  <tr  v-for="item in wareHouseArchives">
                  <td>{{item.name}}</td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
                </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title" name="2">
              <div class="collapseheader">
                <i class="header-icon el-icon-document"></i>办公场所 <span>（仓库档案：{{this.workHouseArchivesSum}}）</span></div>
            </template>
            <div>
               <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>办公场所名称</th>
                  <th>办公场所总面积</th>
                  </tr>
                  <tr  v-for="item in workHouseArchives">
                  <td>{{item.name}}</td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
            </div>
          </el-collapse-item>
           <el-collapse-item>
            <template slot="title" name="2">
              <div class="collapseheader">
                <i class="header-icon el-icon-document"></i>其他房产 <span>其他房产总面积（{{this.otherHouseArchivesSum}}）</span></div>
            </template>
            <div>
               <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>其他房产名称</th>
                  <th>其他房产总面积</th>
                  </tr>
                  <tr  v-for="item in otherHouseArchives">
                  <td>{{item.name}}</td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
            </div>
          </el-collapse-item>
           <el-collapse-item>
            <template slot="title" name="2">
              <div class="collapseheader">
                <i class="header-icon el-icon-document"></i>代管房产档案 <span>代管房产总面积（{{this.escrowHouseArchivesSum}}）</span></div>
            </template>
            <div>
               <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>代管房产名称</th>
                  <th>代管房产总面积</th>
                  </tr>
                  <tr  v-for="item in escrowHouseArchives">
                  <td>
                    <router-link>
                        {{item.name}}
                    </router-link>
                  </td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
            </div>
          </el-collapse-item>
        </el-collapse>
            </main>
          </div>
        </template>

<script>
  import {
    ViewDetail
  } from '../../../api/api';
  export default {
    data() {
      return {
        listData: {},
  
        //门市买场档案
        retailArchivesSum: 0,
        retailArchives: [],

        //办公场所
        workHouseArchivesSum: 0,
        workHouseArchives: [],
  
        //仓库名称
        wareHouseArchivesSum: 0,
        wareHouseArchives: [],

        //其他房产
        otherHouseArchivesSum:0,
        otherHouseArchives: [],

        //代管房产档案
        escrowHouseArchivesSum:0,
        escrowHouseArchives:[],
      };
    },
    methods: {
      getData() {
        let options = {
          params: {
            unid: this.$route.query.unid
          }
        }
        //调取接口
  
        ViewDetail(options).then((res) => {
          this.listData = res.fields
          
         //仓库档案
          let Warehouse = 0
          this.wareHousename = res.fields.fld_1130.split('~')
          this.wareHousearea = res.fields.fld_6600.split('~')
          for (Warehouse in this.wareHousename, this.wareHousearea) {
            this.name = this.wareHousename[Warehouse];
            this.area = this.wareHousearea[Warehouse];
            this.wareHouseArchivesSum += JSON.parse(this.wareHousearea[Warehouse]);
            this.wareHouseArchives.push({
              name: this.name,
              area: this.area
            });
          }
          //办公场所
          this.Offspacename = res.fields.fld_1150.split('~')
          this.Offarea = res.fields.fld_6900.split('~')
          let space = 0
          for (space in this.Offspacename, this.Offarea) {
            this.name = this.Offspacename[space];
            this.area = this.Offarea[space];
            this.workHouseArchivesSum += JSON.parse(this.Offarea[space]);
            this.workHouseArchives.push({
              name: this.name,
              area: this.area
            })
          }
          //门市买场
          if (res.fields.fld_1123.indexOf("~") !=-1) {
            let i = 0
            this.retailname = res.fields.fld_1123.split('~')
            this.retailearea = res.fields.fld_5800.split('~')
            for (i in this.retailearea, this.retailname) {
              this.name = this.retailname[i];
              this.area = this.retailearea[i];
              this.retailArchivesSum += JSON.parse(this.retailearea[i]);
              this.retailArchives.push({
                name: this.name,
                area: this.area
              })
            }
          } else {
            this.retailArchivesSum += JSON.parse(res.fields.fld_5800);
            this.retailArchives.push({
              name: res.fields.fld_1123,
              area: res.fields.fld_5800
            })
          }
           //其他房产
          if (res.fields.fld_74000.indexOf("~") != "-1") {
            let other = 0
            this.otherHousename = res.fields.fld_74000.split('~')
            this.otherHousearea = res.fields.fld_76000.split('~')
            for (other in this.otherHousearea, this.otherHousename) {
              this.name = this.otherHousename[other];
              this.area = this.otherHousearea[other];
              this.otherHouseArchivesSum += JSON.parse(this.otherHousearea[other]);
              this.otherHouseArchives.push({
                 'name': this.name||'',
                 'area': this.area||''
              })
            } 
          } else {
            this.otherHouseArchivesSum += JSON.parse(res.fields.fld_76000);
            this.otherHouseArchives.push({
              name: res.fields.fld_74000,
              area: res.fields.fld_76000
            })
          }
         //代管房产名称
          if (res.fields.fld_1140.indexOf("~") != "-1") {
            let oes = 0
            this.oescrowHousename = res.fields.fld_1140.split('~')
            this.oescrowHousearea = res.fields.fld_6610.split('~')
            for (oes in this.oescrowHousearea) {
              this.name = this.oescrowHousename[oes];
              this.area = this.oescrowHousearea[oes];
              this.escrowHouseArchivesSum += JSON.parse(this.oescrowHousearea[oes]);
              this.escrowHouseArchives.push({
                 'name': this.name,
                 'area': this.area,
              })
            }
          } else {
            this.escrowHouseArchivesSum += JSON.parse(res.fields.fld_6610);
            this.escrowHouseArchives.push({
              name: res.fields.fld_1140,
              area: res.fields.fld_6610
            })
          }
        })
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  
</style>
